<template>
  <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px" style="margin: 20px;">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="queryParams.username" placeholder="请输入查询姓名" clearable style="width: 200px;"/>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable style="width: 200px;">
        <el-option
            v-for="dict in sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="风险评估" prop="riskAssessment">
      <el-select v-model="queryParams.riskAssessment" placeholder="请选择风险评估" clearable style="width: 200px;">
        <el-option
            v-for="dict in risk_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="patient-list">

    <el-card
        v-for="patient in patientList"
        :key="patient.id"
        @click="showPatientHistory(patient.userId, patient.counselorId)"
        class="patient-card"
        :body-style="{ padding: '16px', display: 'flex' }"
    >
      <div class="avatar-container">
        <el-avatar :size="60" :src="patient.avatar"/>
      </div>
      <div class="patient-info">
        <h3 class="name">{{ patient.username }}</h3>
        <!--<h3 class="name" style="margin:10px 0">{{ patient.phonenumber }}</h3>-->
        <div class="meta">
          <div class="left-tags">
            <dict-tag :options="sys_user_sex" :value="patient.sex"/>
          </div>
          <dict-tag
              :options="risk_level"
              :value="patient.riskAssessment"
              class="risk-tag"
              v-if="patient.riskAssessment"
          />
          <el-tag class="no-risk-tag" v-else>暂未咨询</el-tag>
        </div>
        <p class="last-visit">上次咨询时间：{{ parseTime(patient.lastTime) }}</p>
      </div>
    </el-card>
  </div>

  <el-dialog :title="title" v-model="openDialog" width="700px" append-to-body center>
    <div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item
            v-for="(record, index) in historyList"
            :key="record.resultId"
            :timestamp="parseTime(record.startTime)"
            placement="top"
            class="history-item"
        >
          <el-card class="history-card" v-if = "record.startTime">
            <div class="card-section">
              <h4 class="section-title">咨询概况</h4>
              <div class="info-grid">
                <div class="detail-item">
                  <span class="detail-label">咨询方式：</span>
                  <span class="detail-value">
                    <dict-tag
                        :options="consultation_type"
                        :value="record.type"
                    />
                  </span>
                </div>
                <div class="info-item">
                  <span class="label">主要问题：</span>
                  <span class="value-highlight">{{ record.mainProblem }}</span>
                </div>
              </div>
            </div>

            <div class="card-section">
              <h4 class="section-title">风险评估</h4>
              <div class="risk-display">
                <dict-tag
                    :options="risk_level"
                    :value="record.riskAssessment"
                    class="risk-tag-lg"
                />
                <span class="assessment-text">进度评估：
                  <el-progress
                      :percentage="record.progressEvaluation"
                      :color="progressColor(record.progressEvaluation)"
                      class="progress-bar"
                  />
                </span>
              </div>
            </div>

            <div class="card-section">
              <h4 class="section-title">详细记录</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="detail-label">干预方法：</span>
                  <span class="detail-value">
                    <dict-tag
                        :options="consult_techniques"
                        :value="record.counselorMethod"
                    />
                  </span>
                </div>
                <div class="detail-item full-width">
                  <span class="detail-label">观察记录：</span>
                  <el-input
                      v-model="record.observation"
                      type="textarea"
                      :rows="4"
                      readonly
                      class="detail-textarea"
                  />
                </div>

                <div class="detail-item full-width">
                  <span class="detail-label">评估结果：</span>
                  <el-input
                      v-model="record.assessmentResult"
                      type="textarea"
                      :rows="4"
                      readonly
                      class="detail-textarea"
                  />
                </div>
                <div class="detail-item full-width">
                  <span class="detail-label">用户特别备注：</span>
                  <span class="detail-value">{{ record.notes || '无特别备注' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="detail-label">结束时间：</span>
                  <span class="detail-value">{{ parseTime(record.endTime) }}</span>
                </div>
              </div>
            </div>
          </el-card>
          <el-empty v-else description="暂无相关记录" :image-size="80"/>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue';
import DictTag from "@/components/DictTag/index.vue";
import {parseTime} from "@/utils/ruoyi.js";
import {getPatineHistoryList, listPatient} from "@/api/result/result.js";

const {proxy} = getCurrentInstance();
const {
  consultation_type,
  risk_level,
  sys_user_sex,
  consult_techniques
} = proxy.useDict("consultation_type", "risk_level", "sys_user_sex", "consult_techniques");

const openDialog = ref(false);
const historyList = ref([]);
const title = ref('');

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    username: null,
    sex: null,
    riskAssessment: null,
  },
  rules: {}
});

const {queryParams, form, rules} = toRefs(data);
// 测试数据
const patientList = ref([]);

const progressColor = (percentage) => {
  if (percentage > 70) return '#67C23A'
  if (percentage > 40) return '#E6A23C'
  return '#F56C6C'
}

/**
 * 卡片点击事件
 * @param patientId
 * @param counselorId
 */
const showPatientHistory = (patientId, counselorId) => {
  console.log("点击了卡片", patientId, counselorId)
  getPatineHistoryList(patientId, counselorId).then(res => {
    console.log("获取历史记录：", res)
    historyList.value = res.rows;
    title.value = `${res.rows[0].username}的档案详情`;
  })
  openDialog.value = true;
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 获取列表 */
const getList = () => {
  listPatient(queryParams.value).then(response => {
    patientList.value = response.rows;
  });
}

onMounted(() => {
  getList();
})
</script>

<!--grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));-->
<style scoped>

.detail-textarea {
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
}

.detail-textarea .el-textarea__inner {
  background-color: #f9f9f9;
  border: none;
  resize: none;
}

.history-card {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-section {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card-section:last-child {
  border-bottom: none;
}

.section-title {
  color: #409EFF;
  font-size: 16px;
  margin: 0 0 12px 0;
  padding-left: 8px;
  border-left: 4px solid #409EFF;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.value-emphasis {
  font-weight: 600;
  font-size: 15px;
}

.value-highlight {
  color: #67C23A;
  font-weight: 600;
}

.risk-display {
  display: flex;
  align-items: center;
  gap: 20px;
}

.risk-tag-lg {
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 18px;
}

.progress-bar {
  width: 200px;
  margin-left: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-item {
  display: flex;
  align-items: baseline;
}

.detail-label {
  color: #909399;
  min-width: 80px;
  font-size: 13px;
}

.detail-value {
  color: #606266;
  flex: 1;
  word-break: break-word;
}

.full-width {
  grid-column: span 2;
}

.patient-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 10px;
  margin: 20px;
}

.patient-card {
  width: 100%;
  min-width: 300px;
  max-width: 400px;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.patient-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15);
}

.avatar-container {
  margin-right: 30px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.patient-info {
  flex: 1;
  min-width: 0
}

.name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;

}

.meta span:not(:last-child) {
  margin-right: 12px;
}


.risk-tag {
  margin-left: auto;
  padding: 6px 15px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  background-color: transparent !important;
  transform: scale(1.3);

  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.risk-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(173, 216, 230, 0.3); /* 浅蓝色阴影 */
}

.risk-tag, .no-risk-tag {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 14px; /* 统一字号 */
  font-weight: 500; /* 适当字重 */
  transform: none; /* 移除缩放 */
  line-height: 1.5;
}

.no-risk-tag {
  color: #909399; /* 灰色文字 */
  border-color: #dcdfe6; /* 浅灰边框 */
}

.last-visit {
  margin: 8px 0 0;
  font-size: 13px;
  color: #999;
}

@media (max-width: 992px) {
  .patient-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .patient-list {
    grid-template-columns: 1fr;
  }
}
</style>
